<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { InventoryReport } from '@/service/api/inventory';
import { useAuthStore } from '@/store/modules/auth';
import { DateUtil } from '@/utils/dayjs';
import { HomeSkeleton } from '@/components/skeleton';
import BusinessStatsCards from './modules/business-stats-cards.vue';
import BusinessDataOverview from './modules/business-data-overview.vue';
import BusinessTodoPanel from './modules/business-todo-panel.vue';
import StockOutInChart from './modules/stock-out-in-chart.vue';
import SellBuyChart from './modules/sell-buy-chart.vue';
import PurchaseChart from './modules/purchase-chart.vue';
import StockNumMoney from './modules/stock-num-money.vue';
import SellBuyAnaByGood from './modules/sell-buy-ana-by-good.vue';

const authStore = useAuthStore();
const loading = ref(false);

// 报表数据
const reportData = reactive({
  out: { count: 0, num: 0, money: 0 },
  in: { count: 0, num: 0, money: 0 },
  sellBuy: { count: 0, num: 0, money: 0, profit: 0 },
  purchase: { count: 0, num: 0, money: 0 },
  good: {
    count: 0,
    totalNum: 0,
    totalCostMoney: 0,
    totalMoney: 0,
    totalWarn: 0,
    stockNum: 0
  }
});

// 待办事项数据
const todoData = reactive({
  noCheckCount: 0,
  noCompleteCount: 0,
  shouldCount: 0
});

// 获取今日日期
function getTodayDate() {
  return DateUtil.getTodayParts();
}

// 获取当前日期显示
function getCurrentDate() {
  return DateUtil.now('M月D日');
}

// 获取仪表盘数据
async function getDashboardData() {
  try {
    loading.value = true;
    const { year, month, day } = getTodayDate();

    // 获取系统设置
    const systemSetting = authStore.inventorySystemSetting || {};

    // 获取报表数据
    const reportResponse = await InventoryReport.getStockReport({
      year,
      month,
      day,
      modlePrice: systemSetting.modlePrice || '1' // 默认价格模式
    });

    if (reportResponse && !reportResponse.error && reportResponse.data) {
      Object.assign(reportData, reportResponse.data);
    }

    // 获取待办事项数据
    const todoResponse = await InventoryReport.getSomethingTodo();

    if (todoResponse && !todoResponse.error && todoResponse.data) {
      Object.assign(todoData, todoResponse.data);
    }
  } catch {
    window.$message?.error('获取仪表盘数据失败');
  } finally {
    loading.value = false;
  }
}

// 下载App
function downloadApp() {
  window.open('https://api.jimuzhou.cloud/App/jimuzhouApp.html', '_blank');
}

// 下载打印插件
function downloadPlugin() {
  window.open('https://img.jimuzhou.top/pcFile/CLodop_Setup_for_Win64NT_4.145EN.zip', '_blank');
}

onMounted(() => {
  getDashboardData();
});
</script>

<template>
  <div class="bg-gray-50">
    <!-- 加载骨架屏 -->
    <HomeSkeleton v-if="loading" />

    <!-- 没有权限时的显示 -->
    <div v-else-if="!authStore.getInventoryRights()?.report?.see" class="h-96 flex items-center justify-center">
      <NEmpty description="没有报表查看权限" />
    </div>

    <!-- 主内容区域 -->
    <div v-else class="">
      <!-- 顶部概览区 -->
      <div class="mb-4">
        <!-- 页面标题 -->
        <div class="mb-4 flex items-center justify-between">
          <div>
            <h1 class="m-0 text-xl text-gray-900 font-semibold">仪表盘</h1>
            <p class="m-0 mt-1 text-sm text-gray-500">欢迎回来，{{ authStore.userInfo.userName }}</p>
          </div>
          <div class="text-right">
            <div class="text-sm text-gray-500">今日 {{ getCurrentDate() }}</div>
            <div class="mt-1 text-xs text-gray-400">实时更新</div>
          </div>
        </div>

        <!-- 统计卡片 -->
        <BusinessStatsCards :report-data="reportData" />
      </div>

      <!-- 主体内容区 -->
      <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
        <!-- 左侧主要区域 -->
        <NGi span="24 l:18">
          <!-- 商品数据 -->
          <NCard class="mb-4" size="small">
            <template #header>
              <div class="flex items-center text-sm">
                <SvgIcon icon="ant-design:database-outlined" class="mr-2 text-blue-600" />
                商品分析
              </div>
            </template>
            <BusinessDataOverview :report-data="reportData" />
          </NCard>

          <!-- 图表区域 - 第一行 -->
          <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mb-4">
            <NGi span="24 l:8">
              <NCard size="small">
                <StockOutInChart />
              </NCard>
            </NGi>

            <NGi span="24 l:8">
              <NCard size="small">
                <SellBuyChart />
              </NCard>
            </NGi>

            <NGi span="24 l:8">
              <NCard size="small">
                <PurchaseChart />
              </NCard>
            </NGi>
          </NGrid>

          <!-- 图表区域 - 第二行 -->
          <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
            <NGi span="24 l:8">
              <NCard size="small">
                <StockNumMoney />
              </NCard>
            </NGi>

            <NGi span="24 l:16">
              <NCard size="small">
                <SellBuyAnaByGood />
              </NCard>
            </NGi>
          </NGrid>
        </NGi>

        <!-- 右侧信息区 -->
        <NGi span="24 l:6">
          <NSpace vertical :size="16">
            <!-- 待办事项 -->
            <BusinessTodoPanel :todo-data="todoData" />

            <!-- App相关 -->
            <NCard size="small">
              <template #header>
                <div class="flex items-center text-sm">
                  <SvgIcon icon="ant-design:mobile-outlined" class="mr-2 text-orange-600" />
                  App相关
                </div>
              </template>
              <div class="text-xs text-gray-600 space-y-2">
                <p>手机App现已支持推送，接收出入库通知更方便哦</p>
                <p>手机App暂时只支持安卓系统，IOS系统的请等待后面更新</p>
                <div
                  class="cursor-pointer rounded-md bg-blue-600 px-3 py-2 text-white transition-colors hover:bg-blue-700"
                  @click="downloadApp"
                >
                  <div class="flex items-center justify-center">
                    <SvgIcon icon="ant-design:download-outlined" class="mr-1 h-3 w-3" />
                    <span class="text-xs font-medium">点击下载App</span>
                  </div>
                </div>
              </div>
            </NCard>

            <!-- 打印插件 -->
            <NCard size="small">
              <template #header>
                <div class="flex items-center text-sm">
                  <SvgIcon icon="ant-design:printer-outlined" class="mr-2 text-green-600" />
                  打印插件
                </div>
              </template>
              <div class="text-xs text-gray-600 space-y-2">
                <p>如有打印需求，请下载打印插件进行打印,支持Win7及以上版本</p>
                <div
                  class="cursor-pointer rounded-md bg-green-600 px-3 py-2 text-white transition-colors hover:bg-green-700"
                  @click="downloadPlugin"
                >
                  <div class="flex items-center justify-center">
                    <SvgIcon icon="ant-design:download-outlined" class="mr-1 h-3 w-3" />
                    <span class="text-xs font-medium">点击下载插件</span>
                  </div>
                </div>
              </div>
            </NCard>

            <!-- 系统信息 -->
            <NCard size="small">
              <template #header>
                <div class="flex items-center text-sm">
                  <SvgIcon icon="ant-design:info-circle-outlined" class="mr-2 text-blue-600" />
                  系统信息
                </div>
              </template>
              <div class="text-xs text-gray-600 space-y-2">
                <div class="flex justify-between">
                  <span>用户角色:</span>
                  <span class="text-gray-900">管理员</span>
                </div>
                <div class="flex justify-between">
                  <span>最后登录:</span>
                  <span class="text-gray-900">今天 09:30</span>
                </div>
                <div class="flex justify-between">
                  <span>系统状态:</span>
                  <span class="text-green-600">正常</span>
                </div>
              </div>
            </NCard>
          </NSpace>
        </NGi>
      </NGrid>
    </div>
  </div>
</template>

<style scoped></style>
